<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input v-model="keywords" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入名称查询"></el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-table stripe :data="orderList" >
        <el-table-column prop="id" label="订单编号" />
        <el-table-column prop="username" label="用户名称" />

        <el-table-column prop="team_name" label="团队名称" />
        <el-table-column prop="team_img" label="团队图片">
          <template v-slot="scope">
            <el-image style="width: 100px; height: 100px; display: block" v-if="scope.row.team_img"
                      :src="scope.row.team_img" :preview-src-list="[scope.row.team_img]" preview-teleported></el-image>
          </template>
        </el-table-column>

        <el-table-column prop="team_type_name" label="类型名称" />

        <el-table-column prop="create_time" label="创建时间" >
          <template v-slot="scope">
            {{dayjs(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>

        <el-table-column prop="start_location" label="开始地点" />
        <el-table-column prop="end_location" label="结束地点" />
        <el-table-column prop="start_time" label="预约时间" >
          <template v-slot="scope">
            {{dayjs(scope.row.start_time).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>


        <el-table-column prop="money" label="金额" />

        <el-table-column prop="status" label="订单状态" >
          <template v-slot="scope">
            <div v-if="scope.row.status===0"><el-tag type="success">{{"用户已支付"}}</el-tag></div>
            <div v-if="scope.row.status===1"><el-tag type="primary">{{"商家已接单"}}</el-tag></div>
            <div v-if="scope.row.status===2"><el-tag type="success">{{"服务已完成"}}</el-tag></div>
            <div v-if="scope.row.status===3"><el-tag type="warning">{{"用户已取消"}}</el-tag></div>
            <div v-if="scope.row.status===4"><el-tag type="danger">{{"商家拒绝接单"}}</el-tag></div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" fixed="right">
          <template v-slot="scope">

            <el-button type="danger" circle :icon="Delete" @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="card" >
      <el-pagination :total=total v-model:current-page="pagination.currentPage" :page-size=pagination.pageSize @current-change="load" />
    </div>


    <el-dialog title="订单信息" v-model="formVisible" width="50%" destroy-on-close >
      <el-form  :model="form" label-width="70px" style="padding: 20px ">
        <el-form-item prop="content" label="评价内容">
          <el-input
              v-model="form.value.content"
              type="textarea"
              disabled
              :rows="3"
          ></el-input>
        </el-form-item>

        <el-form-item prop="answer" label="回复内容">
          <el-input
              v-model="form.value.answer"
              type="textarea"

              :rows="3"
          ></el-input>
        </el-form-item>





      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
        title="内容"
        v-model="viewVisible"
        width="50%"
        :close-on-click-modal="false"
        destroy-on-close
    >
      <div
          class="editor-content-view"
          style="padding: 20px"
          v-html="formContent"
      ></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref,reactive,onMounted,onBeforeUnmount, shallowRef } from "vue";

import {ElMessage, ElMessageBox,} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";
import {takeAccessToken} from "@/net/index.js"
import TextEditor from "@/views/TextEditor.vue";
import router from "@/router/index.js";
import {get, post} from "@/net/index.js";
import dayjs from "dayjs";
import { createEditor, createToolbar } from '@wangeditor/editor';  // 使用正确的导出方式



const baseUrl = import.meta.env.VITE_BASE_URL



const pagination = reactive({
  pageSize: 3,
  currentPage: 1,
  total: 0
})

const keywords = ref("")
let token = null
const form=reactive({})
const formContent=ref()
const formVisible= ref(false);
const viewVisible= ref(false);
const total = ref()
const orderList = ref([])
const teamList = ref({
  team_id:"",
  team_name:""
})

const view = (info) => {
  formContent.value = info;
  viewVisible.value = true;
};

const load = () => {
  console.log(keywords.value)

  get(`/api/order/getOrderList/${pagination.currentPage}?keywords=${keywords.value || ''}`,(res)=>{
    total.value = res.total
    orderList.value = res.list
    // console.log(teamList.value)
  },(err)=>{
    ElMessage.warning("请求失败")
    console.log(err)
  })

}


const getAllTeamList = () => {
  get(`/api/team/getAllTeamList`,(res)=>{


    teamList.value = res.map(team => ({
      team_id: team.id,
      team_name: team.team_name
    }));
    // console.log(teamList.value)
  },(err)=>{
    ElMessage.warning("请求失败")
    console.log(err)
  })

}


const handleFileUpload=(res)=>{
  // console.log(form.value.avatar)
  form.value.team_emp_avatar = res.data
  // console.log(form.value.avatar)
}

const reset = () => {
  keywords.value = ''
  load()
}

const handleAdd = () => {
  form.value = {}
  formVisible.value = true
  console.log(form.value )
}

const handleEdit = (row) => {
  form.value = row
  formVisible.value = true
  console.log(form.value )
}



const update = () => {
  post(`/api/order/updateOrder`,form.value,(res)=>{
    ElMessage.success("修改成功")
    formVisible.value = false
    load()
    // console.log(form.value)

  },(err)=>{
    ElMessage.warning("修改失败")
    console.log(err)
  })
}

const add = () => {
  post(`/api/order/addOrder`,form.value,(res)=>{
    ElMessage.success("添加成功")
    formVisible.value = false
    load()

  },(err)=>{
    ElMessage.warning("添加失败")
    console.log(err)
  })
}

const save = () => {
  // console.log(form.value.id)
  form.value.id ? update() : add()

}

const del = (id) => {

  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗？', '删除确认', { type: 'warning', confirmButtonText: '确认删除',
    cancelButtonText: '取消', }).then(res => {
    post(`/api/order/deleteOrder/${id}`,null,(res)=>{
      ElMessage.success("删除成功");
      load();
    },(err)=>{
      ElMessage.success("删除失败");
    })
  }).catch(err => {
    console.error(err)
  })
}




onMounted(() => {
  load(1)
  getAllTeamList()
  token = {'Authorization': `Bearer ${takeAccessToken()}`}

})

</script>

<style scoped>

</style>